<template>
	<view class="content" >
		
		<view class="bgBox" :style="{backgroundImage:'url('+ data.bgImage +')'}"></view>
		
		<canvas class="canOne" canvas-id="firstCanvas"></canvas>
		
		<view class="footer">
			<view class="btnSave" @tap="btnSave">保存图片</view>
		</view>
	</view>
</template>
<style>
	/* .content{width: 100%;height:90vh;position: absolute;top:0;left: 0;z-index: 1;background-repeat: no-repeat;background-size: 100% 100%;filter: blur(60upx);} */
	.content {padding-top: 20upx;padding-bottom: 40upx;}
	.content .bgBox{width: 100%;height:90vh;position: absolute;top:0;left: 0;z-index: 2;background-repeat: no-repeat;background-size: 100% 100%;filter: blur(10upx);}
	.content .canOne {width: 90%;height: 1100upx;position: absolute;left:5%;top:20upx;z-index: 22;}
	.content .footer{width: 100%;height:80upx;position:fixed;left:0;bottom:5%;z-index: 22;}
	.content .footer .btnSave {width: 80%;height: 80upx;line-height: 80upx;border-radius: 1000upx;margin-left: 10%;color: white;text-align: center;background:#DC582A;}
</style>
<script>
	import Share from '@/common/wx_share.js'
	export default {
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/index',
					imageUrl:'',
					desc:'',
					content:''
				},
				data: {
					title: "",
					price:"",
					beforePrice:"",
					
					firstImage: "",
					bgImage:"",
					QrImage: "",
					whiteImage: "",
				},
				QrImage:"https://mp.darling.org.cn/QrImage.png",
				whiteImage:"https://mp.darling.org.cn/bgImage.png",
				thisBorde:0,
				imageUrl:"",
				strs:1,
				
			}
		},
		onLoad(e) {
			// pages_index/pages/bePoster/bePoster?id=70
			// this.share.path = this.share.path + "?userId=" + this._$userToken("userInfo").id
			this.AjaxLoad(e.id)
		},
		methods: {
			AjaxLoad(e) {
				var that = this;
				uni.showLoading({
					title:"加载中..."
				})
				let params={
					user_token:this._$userToken("userInfo").token,
					goods_id:e,
				};
				this._$InitRequest.request("Goods/goodsinfo", params).then(res => {
					// this.downLoadImage("https://mp.darling.org.cn/poster.png",0);
					this.downLoadImage(res.data.gpres[0].img_url,0);
					// this.downLoadImage(this.QrImage,1);
					this.downLoadImage(res.data.goodsinfo.qrcode,1);
					this.downLoadImage(this.whiteImage,2);
					
					this.data.title = res.data.goodsinfo.goods_name
					if( this.data.title.length > 17 ){
						this.data.title = this.data.title.substring(0, 17) + "..."
					}
					
					if( res.data.goodsinfo.is_vip == 1 ){
						this.data.price = "¥"+res.data.goodsinfo.vip_shop_price
					}else if( res.data.goodsinfo.is_vip == 0 ){
						this.data.price = "¥"+res.data.goodsinfo.shop_price
					}
					this.data.beforePrice = "¥"+res.data.goodsinfo.zs_market_price
				},error=>{})
			},
			downLoadImage(e,id){
				var that = this;
				uni.downloadFile({
					url:e,
					success:function(e){
						if( id == 0 ){
							that.data.firstImage = e.tempFilePath
							that.data.bgImage = e.tempFilePath
							that.strs ++
						}else if( id == 1 ){
							that.data.QrImage = e.tempFilePath
							that.strs ++
						}else if( id == 2 ){
							that.data.whiteImage = e.tempFilePath
							that.strs ++
						}
						if( that.strs == 4 ){
							that.drawCanvasFirst()
							setTimeout(function(){
								uni.hideLoading()
							},1000)
						}
					}
				})
			},
			drawCanvasFirst() {
				let that = this
				let ctx = uni.createCanvasContext('firstCanvas')
				
				ctx.drawImage(this.data.whiteImage, 0, 0, uni.upx2px(670), uni.upx2px(1100) )
				
				ctx.drawImage(this.data.firstImage, uni.upx2px(20), uni.upx2px(20), uni.upx2px(630), uni.upx2px(315+157.5+78.5))
				
				ctx.setFillStyle('#30313B')
				ctx.setFontSize(uni.upx2px(30))
				ctx.textAlign = "left"
				ctx.fillText(this.data.title, uni.upx2px(20) , uni.upx2px(315+157.5+75+75), uni.upx2px(1200))
				
				ctx.setFillStyle('#DC582A')
				ctx.setFontSize(uni.upx2px(40))
				ctx.textAlign = "left"
				ctx.fillText(this.data.price, uni.upx2px(20) , uni.upx2px(315+157.5+75+75+80), uni.upx2px(1200))
				
				ctx.setFillStyle('#999999')
				ctx.setFontSize(uni.upx2px(26))
				ctx.textAlign = "left"
				ctx.fillText(this.data.price, uni.upx2px(220) , uni.upx2px(315+157.5+75+75+80), uni.upx2px(1200))
				
				ctx.setFillStyle('#999999')
				ctx.setFontSize(uni.upx2px(26))
				ctx.textAlign = "left"
				ctx.fillText("----------", uni.upx2px(220) , uni.upx2px(315+157.5+75+75+80), uni.upx2px(1200))
				
				ctx.drawImage(this.data.QrImage, uni.upx2px(215), uni.upx2px(760), uni.upx2px(240), uni.upx2px(240))
				
				ctx.setFillStyle('#262626')
				ctx.setFontSize(uni.upx2px(28))
				ctx.textAlign = "left"
				ctx.fillText("单领优品小程序", uni.upx2px(230) , uni.upx2px(1035), uni.upx2px(1200))
				
				// ctx.setFillStyle('#BBBBBB')
				// ctx.setFontSize(uni.upx2px(24))
				// ctx.textAlign = "left"
				// ctx.fillText("长按识别·去逛逛", uni.upx2px(230) , uni.upx2px(1075), uni.upx2px(1200))
				
				ctx.draw()
			},
			drawCanvasSecond() {
				let that = this
				let ctx = uni.createCanvasContext('secondCanvas')

				let canvaWidth = uni.upx2px(620)
				let canvaHight = uni.upx2px(1060)

				let firstBgWidth = uni.upx2px(560)
				let firstBgheight = uni.upx2px(900)
				let firstBgX = uni.upx2px(30)
				let firstBgeY = uni.upx2px(80)

				let firstImageWidth = uni.upx2px(520)
				let firstImageHeight = uni.upx2px(340)
				let firstImageX = uni.upx2px(50)
				let firstImageY = uni.upx2px(100)

				let fontTitle = uni.upx2px(36)
				let fontTeacher = uni.upx2px(24)
				let fontName = uni.upx2px(26)
				let fontNames = uni.upx2px(18)

				var avatarurl_width = 50;
				var avatarurl_heigth = 50;
				var avatarurl_x = 30;
				var avatarurl_y = uni.upx2px(750)

				ctx.drawImage(this.data.bg_2, 0, 0, canvaWidth, canvaHight)
				ctx.drawImage(this.data.firstImage, firstImageX, firstImageY, firstImageWidth, firstImageHeight)

				
				var name1height = uni.upx2px(500)
				var name1width = uni.upx2px(500)
				ctx.setFillStyle('#FFFFFF')
				ctx.setFontSize(fontTitle)
				ctx.textAlign = "left"
				ctx.fillText(this.data.title, 30, name1height, name1width)
				
				var name2height = uni.upx2px(540)
				ctx.setFillStyle('#FFFFFF')
				ctx.setFontSize(fontTeacher)
				ctx.textAlign = "left"
				ctx.fillText('授课讲师：' + this.data.teacher, 30, name2height, name1width)

				ctx.save();
				ctx.beginPath();
				ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2,
					false);
				ctx.clip();
				ctx.drawImage(this.data.headImage, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
				ctx.restore();
				
				ctx.setFillStyle('#FFFFFF')
				ctx.setFontSize(fontName)
				ctx.textAlign = "left"
				ctx.fillText(this.data.name, 90, uni.upx2px(790), 250)
				
				ctx.setFillStyle('#FFFFFF')
				ctx.setFontSize(fontNames)
				ctx.textAlign = "left"
				ctx.fillText(this.data.produce_top, 90, uni.upx2px(820), 80)
				
				ctx.setFillStyle('#FFFFFF')
				ctx.setFontSize(fontNames)
				ctx.textAlign = "left"
				ctx.fillText(this.data.produce_bottom, 90, uni.upx2px(840), 80)
				ctx.drawImage(this.data.QrImage, uni.upx2px(380), uni.upx2px(730), uni.upx2px(180), uni.upx2px(180))
				ctx.draw()
			},
			btnSave() {
				let that = this
				var canvasId = "firstCanvas"
				uni.canvasToTempFilePath({
					canvasId: canvasId,
					success: (res) => {
						that.imageUrl = res.tempFilePath
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => {
								uni.showToast({
									title: '保存成功'
								})
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '保存名片码失败'
								})
							}
						})
					}
				})
			},


		}
	}
</script>
